/**
 * 产业全景-专利增长趋势
 */
import { defineComponent } from 'vue';
import * as echarts from 'echarts';
import { WrapTitle, VueChart } from '@common/index';
import './style.scss';

export default defineComponent({
  name: 'IndustryPatentTrend',
  props: {
    name: String,
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  setup() {
    const industryType = '生物产业';
    return { industryType };
  },
  render(props) {
    const { xAxisData = [], seriesData = [] } = props?.data;

    const chartOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          color: '#FFFFFF',
          fontSize: 16,
        },
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
      },
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: {
            color: '#BAE7FF33',
            type: 'dashed',
          },
        },
        type: 'value',
        name: '单位:件',
        nameTextStyle: {
          color: 'rgb(230,247,255,0.7)',
        },
        axisLabel: {
          color: 'rgb(230,247,255,0.7)',
          fontSize: 12,
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: 22,
          data: seriesData,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1E56FE' },
                // { offset: 0.5, color: '#225B93FF' },
                { offset: 1, color: '#1E56FE00' },
              ]),
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#FCFCFC',
                  fontSize: 16,
                },
              },
            },
          },
        },
      ],
      grid: {
        left: '5%',
        right: '5%',
        bottom: '6%',
        containLabel: true,
        show: true,
        borderColor: 'none',
      },
    };

    return (
      <div id="IndustryPatentTrend">
        <WrapTitle title={props.name + '专利增长趋势'}></WrapTitle>
        <VueChart option={chartOption} style={{ width: '490px', height: '380px' }} />
      </div>
    );
  },
});
